「燈愣～」

(以下為系統登入事件的自動通知)

「您好，兔兔」
「歡迎登入 Vuta 奇幻世界」

咦 ...？
系統登入事件？
摁，我昨天是有登入沒錯。

「燈愣～」

咦，這次又是什麼呀？

「您的裝備已被競標，有人出價 300 萬兔幣」
「按下確定並將裝備權限轉移至競標者」

按確ㄉ... 不是啊！
我根本沒賣裝備好嗎？
而且怎麼只有確定鈕 ...

這是被盜了吧！？
肯定是被盜了吧！？

不行不行，趕快問客服...

「燈愣～」
「裝備權限移交完成。」

靠...不是吧！
連打客服都來不及啊！
 

可以取消了

我們在 Day20 有大概提到，v-on 可以在元素的事件上綁定一個行為，可以是運算式或者函數。

而且基本上所有的事件都可以，
甚至還可以綁定自訂事件！

那我們先來看看之前就看過的，
最簡單的用法：

<template>
  <div>
    <div>
      {{info}}
    </div>
    <button @click="info='已移交裝備權限'">
      確定
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "按下確定並將裝備權限轉移至競標者"
    }
  }
}
</script>

沒錯，就是之前介紹過的方式，
直接在按下後的事件設定變數內容。

這是最簡單的方式，
但這麼做靈活度太低了！

所以我們在 methods 中定義一個函式，
把現有的功能移進去：

<template>
  <div>
    <div> {{info}} </div>
    
    <button @click="confirm()">
      確定
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "按下確定以將裝備權限轉移至競標者"
    }
  },
  methods: {
    confirm() {
      this.info = '已移交裝備權限'
    }
  }
}
</script>

移進去的好處當然就是要加新功能的時候非常方便啦！

比如說我們想要按下按鈕時，
也能顯示在 console 上，
我們就只需要在 confirm 加一行：

confirm() {
  this.info = '已移交裝備權限'
  console.log(this.info)
}

是吧！ 這樣多快呀!

可是如果今天是正常情況，
有取消按鈕時，怎麼辦呀？

哎呀，這就別煩惱了，
用函數這樣就很簡單啊！

來直接看看怎麼做吧：

<template>
  <div>
    <div> {{info}} </div>
    
    <button @click="confirm('已移交裝備權限')">
      確定
    </button>
    <button @click="confirm('已中斷裝備移交流程')">
      取消
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "按下確定以將裝備權限轉移至競標者"
    }
  },
  methods: {
    confirm(title) {
      this.info = title
      console.log(this.info)
    }
  }
}
</script>

摁摁，這樣是不是就完成啦～
兩個按鈕都可以用同一個函數囉！
 

事件們

前面也說了，
既然所有的事件基本上都支援，
但要怎麼樣使用他們啊？

我們來看一下這些簡單的例子，
應該就能懂囉！

• onclick -> v-on:click
• ondblclick -> v-on:dblclick
• onchange -> v-on:change
• oninput -> v-on:input
• onfocus -> v-on:focus
• onblur -> v-on:blur
• ondrag -> v-on:drag
• onsubmit -> v-on:submit

還是找不到關聯性嗎？
那這樣：

• onclick -> v-on:click
• ondblclick -> v-on:dblclick
• onchange -> v-on:change
• oninput -> v-on:input
• onfocus -> v-on:focus
• onblur -> v-on:blur
• ondrag -> v-on:drag
• onsubmit -> v-on:submit

這樣可以了吧！！！

沒錯哦，
其實就是把 on 改成 v-on: 就行了，
那要縮短的話則是用 : 來取代 on。

我們就拿 oninput 事件來玩玩吧！

如果今天想要做出一個，
輸入框打了什麼字，旁邊就出現什麼字，
該怎麼簡單做到呢？

「兔兔，v-model 就可以了！」

哦，不錯嘛!
沒錯哦，v-model 就能解決，

但是 ...
我們這邊是講事件啊啊啊！！！

先講一下 oninput 事件本身，其實就是 input、select、textarea 元素的 value 被修改時，就會觸發到 oninput 事件。

所以同理，我們這邊的需求是：

打字 -> 在別處同步顯示

如果是以純 js 來完成的話，之前 day 20 就有看過的相同範例，但我們這邊可以少取一個 id，透過事件參數 event 來完成：

<input type="text" id="input" oninput="textSync(event)" />
<div id="show"></div>

<script>
function textSync(event) {
  const show = document.getElementById("show")
  show.innerText = event.target.value
}
</script>

event 是 oninput 事件本身，target 就是發生事件的元素，那我們使用這個 target 去取 value 就等同於我們幫它取個 id 在去抓 value 的動作啦！

註：部分瀏覽器如 IE 讀不到 event.target，必須用 event.srcElement，效果相同。 我不知道現在的 IE 還有沒有這毛病，畢竟我根本不用。

 
那你是不是從上面這個互動模式看出什麼端倪了？

「有，因為 vue 也可以這麼做！」
「只是，vue 的 evnet ...？」

好，我講解一下 vue 中的 event ～
在 vue 中，叫做 $event，
用法一模一樣的哦！

既然知道名稱切確是什麼了，
就快來試一次吧：

<template>
  <input type="text" @input="textSync($event)" />
  <div>{{ content }}</div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    textSync(event) {
      this.content = event.target.value
    }
  }
}
</script>

是不是幾乎沒兩樣呢！
反而在顯示的部分還更簡化了呢～

而有一個魔法指令，其實就跟這個有關呢！
 

v-model

這個事件有什麼關係呢？

當然有，
因為其實 v-model 就是這樣做成的哦！

如果我們透過 v-bind:value 給 input 賦值，
再透過 v-on:input 事件更新，
那不就會跟 v-model 效果一模一樣了嗎！

讓我們直接來看看範例：

<template>
  <!-- v-model -->
  <input v-model="content" />

  <!-- v-bind + v-on -->
  <input :value="content" @input="content = $event.target.value" />
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
}
</script>

這範例連結在文章尾部有～

 
這樣完成了。

不管是在 v-model 的 input 中輸入，
或是在我們實作的 input 中輸入，
兩個 input 的內容都會同步了！

雖然上面這樣就差不多了，
不過事件其實還有一個好玩的功能喔！
 

事件修飾

光看名稱可能覺得比較難懂，
什麼是修飾？

事件修飾就是當事件發生時，
我們只知道一個事件觸發了，
但其實這樣是很不精確的！

以滑鼠的點擊來說，
我們觸發了滑鼠點擊，
但卻不知道是按下了左鍵還右鍵，
那麼某些使用者行為的處理結果就會很奇怪。

我們可以用 onkeyup 的事件看看。

當鍵盤按鍵被按下，
接著按鍵放開時會觸發 onkeyup，
但要是今天一個聊天室，
我們想要做功能是按下 enter 送出，
結果卻一打字就一直送出了，
不是很煩嗎？

舉例：

<template>
  <input type="text" @keyup="sendMsg()" />
</template>

這樣任何按鍵按按下，
再放開時就會觸發 sendMsg( )，
太可怕了！

所以我們這時候就必須用到事件修飾啦！

Vue 本身有支援對事件多加上屬性來對事件進行修飾，讓我們來試試把事件限定在 enter 時才觸發：

<template>
  <input type="text" @keyup.enter="sendMsg()" />
</template>

完美！ 這樣簡單又明瞭。 現在我們就知道它是按下 enter 時才會呼叫 sendMsg( ) 來送出訊息啦！

我們可以換成玩玩底下這個顯示方向鍵的例子：

<template>
  <div
    @keydown.up="showKey('up')"
    @keydown.down="showKey('down')"
    @keydown.left="showKey('left')"
    @keydown.right="showKey('right')"
    tabindex="0"
  >{{ content }}</div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    showKey(key) {
      this.content = {
        "up": "↑",
        "down": "↓",
        "left": "←",
        "right": "→",
      }[key]
    }
  }
}
</script>

這範例連結在文章尾部也有～

 
那上面這個顯示方向鍵的功能很簡單，就是按下鍵盤上的上下左右時，div 中會顯示你按的方向。

其實這樣簡單的功能就很有趣了對吧？
 

今天的也很簡單哦！

應該算是很好理解的內容，
那下一篇就要來了解元件間的資料傳遞，

要把東西開始組合起來囉！
 

給你們的回家作業：

• 作業實施要點：
  • 一樣就是玩玩範例
• 範例
  • v-model 指令實現：破解魔法
  • 方向鍵顯示：有玩過唯舞獨尊嗎？
     

關於兔兔們：

• Tailwind CSS 臺灣官網
• Tailwind CSS 臺灣 (臉書粉絲專頁)
• 兔兔教 × Tailwind CSS Taiwan (臉書社群)
• 兔兔教大本營

( # 兔兔小聲說 )

加上下一句，就是：

心中若少軟萌兔，編譯再也無一物；
心中若存軟萌兔，編譯再也無一誤。

祝大家程式都能寫都順暢又漂亮哦！